<template>
	<view class="first">
	<view class="appHeader">
		<u-sticky bgColor="#fff">
		 <u-tabs style="background-color: #eff8ff; ;" lineColor="greenyellow" lineWidth=35 :list="nav" @click="click"></u-tabs>
		</u-sticky>
	</view>
	<view class="second">
		<view class="search">
			<u-icon size="18" color="#ccc" name="search"></u-icon>
		</view>
		<img src="static/musiclogo.png" class="logo" />
	</view>
	</view>
	
	
	
</template>

<script>
	export default{
		name:"appHeader",
		data(){
			return{
				nav:[{
				    name: '推荐',
				}, {
				    name: '乐馆',
				}, {
				    name: '听书'
				}, {
				    name: '故事'
				}, {
				    name: '会员'
				}, {
				    name: '金币'
				}, {
				    name: '毕业季'
				}, {
				    name: 'AI帮你唱'
				}, {
				    name: 'SunoAI'
				}]
			};
		},
		methods:{
			click(item){
				console.log("item:",item);
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.second{
		display: flex;
		align-items: center;
		margin-top: 10px;
		
		.search{
			width: 80%;
			height: 26px;
			margin-left: 10px;
			border-radius: 12px;
			background-color: white;
			text-align: center;
			line-height: 24px;
			
			.u-icon{
				padding: 4px;
			}
		}
		.logo{
			width: 35px;
			height: 35px;
			margin-left: 20px;
		}
	}
	
</style>